<template>
    <div class="proofOfImplementation">
        <a-modal
            v-drag-modal
			title="实施应用证明"
            class="enclosure_modal"
			:visible="applicationProofVisible"
            :maskClosable="false"
            :width="700"
            @cancel="handleCancelProofVisible"
		>
            <template slot="footer">
                <a-button @click="handleCancelProofVisible">取消</a-button>
                <a-button key="submit" type="primary" :disabled="disabledAdd" @click="handleSubmitProof">保存</a-button>
            </template>
            <a-form-model ref="applicationProofForm" :model="form" :rules="rules">
				<a-form-model-item ref="ssyyDwmc" prop="ssyyDwmc" label="实施应用单位名称" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
					<a-input v-model="form.ssyyDwmc" placeholder="实施应用单位名称"  @blur="() => {$refs.ssyyDwmc.onFieldBlur();}"/>
				</a-form-model-item>
                <a-form-model-item ref="ssyyQssj" prop="ssyyQssj" label="应用起始时间" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
					<a-date-picker
                        v-model="form.ssyyQssj"
                        placeholder="应用起始时间"
                        style="width: 100%;"
                        @change="startChange"
                    />
				</a-form-model-item>
                <a-form-model-item ref="ssyyLxr" prop="ssyyLxr" label="应用单位联系人" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
					<a-input v-model="form.ssyyLxr" placeholder="应用单位联系人"  @blur="() => {$refs.ssyyLxr.onFieldBlur();}"/>
				</a-form-model-item>
                <a-form-model-item ref="ssyyDh" prop="ssyyDh" label="座机" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
					<a-input v-model="form.ssyyDh" placeholder="座机"  @blur="() => {$refs.ssyyDh.onFieldBlur();}"/>
				</a-form-model-item>
                <a-form-model-item ref="ssyyJjxy" prop="ssyyJjxy" label="产生的经济效益（万元）" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
					<a-input v-model="form.ssyyJjxy" placeholder="产生的经济效益（万元）" type="number"  @blur="() => {$refs.ssyyJjxy.onFieldBlur();}"/>
				</a-form-model-item>
				<a-form-model-item ref="fujianfile" prop="fujianfile" label="上传文件（50M以内，pdf格式）：" :label-col="{ span:12 }" :wrapper-col="{ span: 8}">
                    <a-upload
                        action="#"
                        accept='.pdf'
                        :file-list="fileList"
                        :show-upload-list="showUploadList"
                        :before-upload="beforeUpload"
                    >
                        <a-button style="width: 120px;height: 40px;line-height: 40px;margin:0;background:#fff;color:#333;"><a-icon type="upload" />上传</a-button>
                    </a-upload>
                </a-form-model-item>
			</a-form-model>
        </a-modal>
    </div>
</template>
<script>
import {
    cxjsb_ssyyAdd_fj,
    cxjsb_getSsyy
} from '@/api/shenbao';
export default {
    name: 'ProofOfImplementation',
    props: {
        showFlag: {
            type: Boolean,
            default: false
        },
        edit_id: {
            type: String,
            default: ''
        },
        type: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            applicationProofVisible: false,
            disabledAdd: false,
            form: {},
            rules: {
                ssyyDwmc: [
                    { required: true, message: '请填写实施应用单位名称',trigger: 'blur' }
                ],
                ssyyQssj: [
                    { required: true, message: '请填写应用起始时间',trigger: 'change' }
                ],
                ssyyLxr: [
                    { required: true, message: '请填写应用单位联系人',trigger: 'blur' }
                ],
                ssyyJjxy: [
                    { required: true, message: '请填写产生的经济效益',trigger: 'blur' }
                ],
                fujianfile: [{ required: true, message: '请上传文件',trigger: 'change' }],
            },
            fileList: [],
            showUploadList: {
                showDownloadIcon: false,
                showRemoveIcon: false,
            },
            cxj_cxj_id: ''
        }
    },
    watch: {
        showFlag(newVal, oldVal) {
            if (newVal != oldVal) {
                this.cxj_cxj_id = this.$route.query.cxj_cxj_id;
                this.applicationProofVisible = true;
                if (this.type == 2) {
                    this.getInfo()
                }
            }
        }
    },
    methods: {
        getInfo() {
            let self = this
            self.applicationProofVisible = true;
            let data = {
                cxj_cxj_id: self.cxj_cxj_id,
                id: self.edit_id
            }
            cxjsb_getSsyy(data).then(res=>{
                if (res.data.code === 200) {
                    let data = res.data.result;
                    self.form = JSON.parse(JSON.stringify(data));
                    self.form.fujianfile = data.fileRename;
                    self.files = data.fileRename;
                    self.edit_id = data.id;
                    self.fileList.push({
                        uid: data.id,    // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突  
                        name: data.fileRename,   // 文件名  
                        status: 'done', // 状态有：uploading done error removed  
                        response: '{"status": "success"}', // 服务端响应内容  
                    })
                }
            })
        },
        handleCancelProofVisible() {
            this.applicationProofVisible = false;
            this.disabledAdd = false;
            this.files = '';
            this.fileList = [];
            this.form = {}
            this.$refs.applicationProofForm.resetFields();
        },
        startChange(date, dateString){
            this.form.ssyyQssj = dateString;
        },
        beforeUpload(file) {
            if (file) {
                if (file.size > 50*1024*1024) { // 此处判断上传文件的大小 , 单位为 b 故要乘以两个1024
                    this.$message.warning('文件最大为50兆')
                    return
                } else if (file.type!='application/pdf') { // 此处判断上传文件的格式
                    this.$message.warning('请上传pdf格式的文件')
                    return
                } else {
                    this.files = file;
                    this.form.fujianfile = file;
                    this.fileList = [file];
                }
            }
            return false;
        },
        handleSubmitProof() {
            let self = this;
            self.$refs.applicationProofForm.validate(valid => {
                if (valid) {
                    let formData = new FormData();
                    console.log('self.form===', self.form, self.files);
                    formData.append('cxj_cxj_id', self.cxj_cxj_id);
                    formData.append('file', self.files);
                    formData.append('ssyyDwmc', self.form.ssyyDwmc);
                    formData.append('ssyyQssj', self.form.ssyyQssj);
                    formData.append('ssyyLxr', self.form.ssyyLxr);
                    formData.append('ssyyDh', self.form.ssyyDh);
                    formData.append('ssyyJjxy', self.form.ssyyJjxy);
                    if (self.type == 2) {
                        formData.append('id', self.edit_id);
                    }
                    self.disabledAdd = true;
                    cxjsb_ssyyAdd_fj(formData).then(res=>{
                        if (res.data.code == '200') {
                            self.$message.success('保存成功');
                            self.handleCancelProofVisible();
                            self.$emit('callback')
                        } else {
                            self.$message.error(res.data.message);
                        }
                    }).catch(err=>{
                        self.disabledAdd = false;
                        self.disabled_edit = false;
                    })
                } else {
                    return false;
                }
            })
        },
    },
}
</script>
<style lang="less" scoped></style>
